import GGEditor, { Flow,Item, ItemPanel } from 'gg-editor';
import { CanvasPanel, DetailPanel, EdgePanel, GroupPanel, MultiPanel, NodePanel } from 'gg-editor';
import { Card } from 'antd';
import { Col, Row } from 'antd';
import React from 'react';
import styles from './index.less';

GGEditor.setTrackable(false);

function App(){
    return (
        <GGEditor className={styles.editor}>
            <Row className={styles.editorBd}>
                <Col span={4} className={styles.editorSidebar}>
                    <ItemPanel className={styles.itemPanel}>
                        <Card bordered={false}>
                            <Item
                                type="node"
                                size="80*48"
                                shape="flow-rect"
                                model={{
                                    color: '#1890FF',
                                    label: 'Normal',
                                }}
                                src=""
                            />
                        </Card>
                    </ItemPanel>
                </Col>
                <Col span={16} className={styles.editorContent}>
                    <Flow className={styles.flow} />
                </Col>
                <Col span={4} className={styles.editorSidebar}>
                    <DetailPanel className={styles.detailPanel}>
                        <NodePanel>
                            1
                        </NodePanel>
                    </DetailPanel>
                </Col>
            </Row>
        </GGEditor>
    )
}

export default App